<script setup>
import { onMounted } from 'vue'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)
onMounted(() => {
  gsap.fromTo(
    '.logo-img',
    {
      x: 0,
      opacity: 0
    },
    {
      x: '20%',
      opacity: 1,
      duration: 2,
      ease: 'power2.out'
    }
  )
  ScrollTrigger.create({
    trigger: '.scroll-el', //skyblue元素
    start: 'top 0', //.skyblue元素的顶部开始
    end: '+=3600', //.skyblue
    markers: true, //开始标记  结束标记
    scrub: 1, // 关键点 和滚动条绑定
    pin: true, //固定起始位置
    /**
     *  fromTo里第一个对象是开始的状态  第二个动画是你要执行的状态
     *  '<' 上一个动画开始，我也开始
     *  '>' 上一个动画结束，我在开始   默认
     *   1 一秒后执行  可以2也可以3....
     *  '+=1' 上一个动画结束后一秒我在执行   可以2也可以3....
     *  '-=1' 上一个动画结束前一秒我在执行    可以2也可以3....
     */
    animation: gsap
      .timeline()
      .fromTo('.one', { top: 0 }, { top: '-100vh' }, '>')
      .fromTo('.two-text', { marginTop: 0 }, { marginTop: '-100vh' }, '>')
      .fromTo('.three-text', { marginLeft: 0 }, { marginLeft: '-200px' }, '>')
  })
})
</script>

<template>
  <div class="scroll-el">
    <!--第一屏-->
    <div class="w-[100%] h-[100vh] overflow-hidden bg-[#000] absolute left-0 top-0 z-10 one">
      <div class="absolute z-10 top-[20%] logo-img flex flex-col items-center justify-center">
        <img
          class="h-[200px]"
          src="https://res.insta360.com/static/infr_base/9cdc48888befe0bda8ad0aec7b6085c3/Insta360%20X3_Logo&Slogan_Online_White_SC.svg"
          alt=""
        />
        <div class="w-[300px] h-[56px] rounded-[30px] overflow-hidden">
          <video
            class="rounded-[30px]"
            src="https://media.insta360.com/static/infr_base/6f2cdbb854314d0c60ac84371a9ead63/preview3.mp4"
            autoplay
            loop
            muted
          ></video>
        </div>
      </div>
      <video
        src="https://media.insta360.com/static/799499c95da727e1f88d156290987e5f/X3K2V-169.mp4"
        autoplay
        muted
      ></video>
    </div>
    <!--第三屏-->
    <div class="w-[100%] h-[100vh] overflow-hidden bg-[#000] three flex">
      <div class="w-[600px]">
        <video
          autoplay
          muted
          src="https://media.insta360.com/static/2ab4a7d6c45cd22ccfb55d754959a593/a.mp4"
        ></video>
      </div>
      <div class="flex-1 ml-[200px] h-[100vh] overflow-hidden">
        <div class="three-text">
          <div class="space-y-[20px] h-[100vh] w-[560px] flex flex-col justify-center text-white">
            <div class="text-[36px]">5.7K 全景拍摄</div>
            <div class="text-[30px]">“视”界， 不止眼前。</div>
            <div>
              X3 可拍摄震撼人心的 5.7K 全景视频，360°
              全方位记录，不错过任何精彩瞬间。充分释放影像创造力，为你带来无限可能。
            </div>
            <video
              class="w-[560px] h-[315px] object-fill rounded-2xl"
              muted
              autoplay
              src="https://media.insta360.com/static/infr_base/29da40c4ab23bbad0b907b4867d13721/360_video.mp4"
            ></video>
          </div>
          <div class="space-y-[20px] h-[100vh] w-[560px] flex flex-col justify-center text-white">
            <div class="text-[18px] text-[#5f98d6]">重取景</div>
            <div class="text-[30px]">先拍摄， 后取景。</div>
            <div>
              全景视频可通过 Insta360 App
              中的AI智能工具进行剪辑，后期自由取景，随心构图，轻松解锁创意大片。轻轻一点，即可分享，画质无任何损失，让你的社交平台更出彩
            </div>
            <video
              class="w-[560px] h-[315px] object-fill rounded-2xl"
              muted
              autoplay
              src="https://media.insta360.com/static/infr_base/9567b5fe9ec99fbb4b772b6f7e9a2470/Reframing_cn.mp4"
            ></video>
          </div>
        </div>
      </div>
    </div>
    <div class="w-[100%] h-[100vh] overflow-hidden bg-[#000] three flex">
      <div class="w-[600px]">
        <video
          autoplay
          muted
          src="https://media.insta360.com/static/2ab4a7d6c45cd22ccfb55d754959a593/a.mp4"
        ></video>
      </div>
      <div class="flex-1 ml-[200px] h-[100vh] overflow-hidden">
        <div class="three-text">
          <div class="space-y-[20px] h-[100vh] w-[560px] flex flex-col justify-center text-white">
            <div class="text-[36px]">5.7K 全景拍摄</div>
            <div class="text-[30px]">“视”界， 不止眼前。</div>
            <div>
              X3 可拍摄震撼人心的 5.7K 全景视频，360°
              全方位记录，不错过任何精彩瞬间。充分释放影像创造力，为你带来无限可能。
            </div>
            <video
              class="w-[560px] h-[315px] object-fill rounded-2xl"
              muted
              autoplay
              src="https://media.insta360.com/static/infr_base/29da40c4ab23bbad0b907b4867d13721/360_video.mp4"
            ></video>
          </div>
          <div class="space-y-[20px] h-[100vh] w-[560px] flex flex-col justify-center text-white">
            <div class="text-[18px] text-[#5f98d6]">重取景</div>
            <div class="text-[30px]">先拍摄， 后取景。</div>
            <div>
              全景视频可通过 Insta360 App
              中的AI智能工具进行剪辑，后期自由取景，随心构图，轻松解锁创意大片。轻轻一点，即可分享，画质无任何损失，让你的社交平台更出彩
            </div>
            <video
              class="w-[560px] h-[315px] object-fill rounded-2xl"
              muted
              autoplay
              src="https://media.insta360.com/static/infr_base/9567b5fe9ec99fbb4b772b6f7e9a2470/Reframing_cn.mp4"
            ></video>
          </div>
        </div>
      </div>
    </div>
    <!--第二屏-->
    <div class="w-[100%] h-[100vh] overflow-hidden bg-[#000] two flex">
      <div class="w-[600px]">
        <video
          autoplay
          muted
          src="https://media.insta360.com/static/2ab4a7d6c45cd22ccfb55d754959a593/a.mp4"
        ></video>
      </div>
      <div class="flex-1 ml-[200px] h-[100vh] overflow-hidden">
        <div class="two-text">
          <div class="space-y-[20px] h-[100vh] w-[560px] flex flex-col justify-center text-white">
            <div class="text-[36px]">5.7K 全景拍摄</div>
            <div class="text-[30px]">“视”界， 不止眼前。</div>
            <div>
              X3 可拍摄震撼人心的 5.7K 全景视频，360°
              全方位记录，不错过任何精彩瞬间。充分释放影像创造力，为你带来无限可能。
            </div>
            <video
              class="w-[560px] h-[315px] object-fill rounded-2xl"
              muted
              autoplay
              src="https://media.insta360.com/static/infr_base/29da40c4ab23bbad0b907b4867d13721/360_video.mp4"
            ></video>
          </div>
          <div class="space-y-[20px] h-[100vh] w-[560px] flex flex-col justify-center text-white">
            <div class="text-[18px] text-[#5f98d6]">重取景</div>
            <div class="text-[30px]">先拍摄， 后取景。</div>
            <div>
              全景视频可通过 Insta360 App
              中的AI智能工具进行剪辑，后期自由取景，随心构图，轻松解锁创意大片。轻轻一点，即可分享，画质无任何损失，让你的社交平台更出彩
            </div>
            <video
              class="w-[560px] h-[315px] object-fill rounded-2xl"
              muted
              autoplay
              src="https://media.insta360.com/static/infr_base/9567b5fe9ec99fbb4b772b6f7e9a2470/Reframing_cn.mp4"
            ></video>
          </div>
        </div>
      </div>
    </div>
    <!--第四屏幕-->
    <div class="w-[100%] h-[100vh] relative overflow-hidden bg-[#000] four">
      <video
        muted
        autoplay
        src="https://media.insta360.com/static/4126ddf28d98d007157da8b39e8dbd4e/SENSOR_pc.mp4"
        class="w-[100%] h-[100%] object-fill"
      ></video>
      <div
        class="absolute w-[100%] h-[100vh] bg-[red] top-0 left-0 z-20 overflow-hidden text-white"
      >
        <div class="three-one">
          <div class="space-y-[20px] w-[400px]">
            <div class="text-[40px] font-bold">我是第一屏</div>
            <div class="text-[30px]">囊括天地， 细节尽显。</div>
            <div>
              超越过往，超乎想象。全景照片现在能以惊人的 7200 万像素呈现更丰富的细节，360°
              高清记录当下所有景象。
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="w-[100%] h-[100vh] bg-[#000]"></div>
  </div>
</template>
